var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'line',
            marginRight: 25,
            marginBottom: 50
        },
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            /*title: { text: 'Date' },*/
            categories: [<?=$analytics['date']?>],
            labels: {
                rotation: -45,
                align: 'right'
            }

        },
        yAxis: {
            title: {
                text: ''
            },
            min: 0,
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y;
            }
        },
        legend: {
            align: 'left', 
            verticalAlign: 'top', 
            x: 50,
            y: 10,  
            borderWidth: 0,
            floating: true,
            reversed: true
            
        },
        plotOptions: {
             series: {
                cursor: 'pointer',
                point: {
                   events: {
                      click: function() {
                         hs.htmlExpand(null, {
                            pageOrigin: {
                               x: this.pageX, 
                               y: this.pageY
                            },
                            headingText: this.series.name,
                            maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+ 
                               this.y +' visits',
                            width: 200
                         });
                      }
                   }
                },
                marker: {
                   lineWidth: 1
                }
             }
          },  
        series: [
            {
                name: 'Visit',
                data: [<?=$analytics['visit']?>]
            },
            {
                name: 'Page Views',
                data: [<?=$analytics['pageviews']?>]
            }
        ]
    });
    
    
});